﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>tabs 选项卡</title>
    <link rel="stylesheet" href="../lib/reset.css" />
    <link rel="stylesheet" href="css/tabsstyle.css" />
    <script src="../lib/jquery.min.js"></script>
    <script src="../src/tabs.js"></script>
    <script type="text/javascript">
	$(document).ready(function () {
		$(".demo1").Tabs({
			btnNodes : $(".tabstitle span"), //设定tab按钮jQuery对象集
			tabNodes : $(".tabscontent") //设定切换内容jQuery对象集		
		});
	});
	</script>
</head>
<body>
    <div class="demo1">
        <div class="tabstitle">
            <span>选项一</span><span>选项二</span><span>选项三</span>
        </div>
        <div class="contents">
            <div class="tabscontent">
                <p>
                    选项内容一</p>
                <p>
                    选项内容一选项内容一选项内容一选项内容一选项内容一选项内容一</p>
                <p>
                    选项内容一</p>
            </div>
            <div class="tabscontent">
                <p>
                    选项内容二</p>
                <p>
                    选项内容二</p>
                <p>
                    选项内容二选项内容二选项内容二选项内容二选项内容二选项内容二选项内容二选项内容二选项内容二</p>
            </div>
            <div class="tabscontent">
                <p>
                    选项内容三选项内容三选项内容三选项内容三选项内容三选项内容三选项内容三选项内容三</p>
                <p>
                    选项内容三</p>
                <p>
                    选项内容三</p>
            </div>
        </div>
    </div>
</body>
</html>
